<script setup lang="ts">
import { useProject } from '../useProject';
import { reactive, ref, onMounted } from "vue";

const props = defineProps<{}>()
const emit = defineEmits([])
const initData = reactive({} as any)
const {
    projectTypes,
    companys,
    projectTypeCheck,
    show,
    showcalendar,
    date,
    defaultDate,
    onConfirm,
    reset,
    determine,
} = useProject(props, initData, emit)
defineExpose({
    show
})
// const defaultDate = ref(new Date())

</script>
<template>
    <div class="screen-page">
        <van-popup v-model:show="show" position="right" :style="{ width: '90%', height: '100%' }">
            <div>
                <div class="category-title">工程类型</div>
                <div class="project-type">
                    <van-tag
                        size="large"
                        v-for="(item,index) in projectTypes"
                        @click="projectTypeCheck(item)"
                        :class="item.checked ? 'tag-checked' : ''"
                    >{{ item.name }}</van-tag>
                </div>
            </div>
            <div>
                <div class="category-title">保险公司</div>
                <div class="company">
                    <van-tag
                        size="large"
                        v-for="(item,index) in companys"
                        @click="projectTypeCheck(item)"
                        :class="item.checked ? 'tag-checked' : ''"
                    >{{ item.name }}</van-tag>
                </div>
            </div>
            <div>
                <div class="category-title">时间</div>
                <div class="time">
                    <van-cell title="选择日期区间" :value="date" @click="showcalendar = true" />
                    <van-calendar
                        v-model:show="showcalendar"
                        type="range"
                        color="#1989fa"
                        :min-date="new Date('1970/01/01')"
                        :default-date="defaultDate"
                        confirm-text="完成"
                        confirm-disabled-text="请选择结束时间"
                        @confirm="onConfirm"
                    />
                </div>
            </div>
            <div class="bottom-btn">
                <van-button type="default" class="reset" @click="reset">重置</van-button>
                <van-button type="default" class="determine" @click="determine">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>
<style scoped>
.screen-page {
    display: flex;
    flex-direction: column;
}
.project-type {
    width: 100%;
    height: 220px;
}
.company {
    width: 100%;
    height: 220px;
}
.time {
    width: 100%;
    height: 220px;
}
.tag-checked {
    background-color: #8989e7 !important;
    color: white !important;
}
.category-title {
    padding: 35px 0px 0px 22px;
    color: rgb(51, 56, 61);
}
:deep(.van-tag--large) {
    margin-left: 15px;
    margin-top: 20px;
    background-color: rgb(240, 242, 241);
    color: rgb(68, 67, 67);
    font-weight: bolder;
}
:deep(.van-cell) {
    margin-left: 15px;
}
:deep(.van-cell__value) {
    text-align: left;
}
.bottom-btn {
    display: flex;
}
.reset {
    background-color: rgb(221, 221, 223) !important;
    border-radius: 0px !important;
    margin-left: 0 !important;
    width: 50% !important;
    color: white;
    position: fixed;
    bottom: 0;
    left: 0;
}
.determine {
    background-color: rgb(245, 166, 37) !important;
    border-radius: 0px !important;
    margin-left: 0 !important;
    width: 50% !important;
    color: white;
    position: fixed;
    bottom: 0;
    right: 0;
}
:deep(.van-calendar__popup.van-popup--bottom) {
    height: 60%;
}
</style>